<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除车位</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            background-image: url('停车场图片.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

     .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
        }

     .title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

     .form-group {
            margin-bottom: 15px;
        }

     .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

     .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

     .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

     .form-group button:hover {
            background-color: #0056b3;
        }

     .message {
            text-align: center;
            margin-top: 15px;
            color: green;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <h2 class="title">删除车位</h2>
        <form id="deleteParkingForm">
            <div class="form-group">
                <label for="parkingLotNumber">车位编号</label>
                <input type="text" id="parkingLotNumber" v-model="seatid" @blur="doseatidcheck" required>
				<br/>
				<label :style="{color:tipscolor}">{{checktips}}</label>
            </div>
            <div class="form-group">
                <button type="button" @click="deleteseat">删除车位</button>
            </div>
        </form>
		<button class="back-button" onclick="goBack()">返回</button>
        <div class="message" id="message"></div>
    </div>

	<script src="layui/layui.js" type="text/javascript"></script>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	    let vm = new Vue({
	        el: "#app",
	        data: {
	            seatid:"",
				checktips:"",
				tipscolor:""
	        },
			methods:{
				doseatidcheck(){
					let url = "http://localhost:8080/seat/selectById";
					let params={seatId:this.seatid};
					$.get(url,params,(res)=>{
						this.checktips=res.msg;
						if(res.code==200){
							this.tipscolor="green";
						}else{
							this.tipscolor="red";
						}
					},"JSON");
				},
				deleteseat(){
					let url = "http://localhost:8080/seat/delete";
					let params={seatId:this.seatid};
					$.get(url,params,(res)=>{
						if(res.code==200){
							window.location.href="seat.html";
						}else{
							alert(res.msg);
						}
					},"JSON");
				}
			}
	    });
	</script>
    <script>
		function goBack() {
		    window.location.href = 'seat.html'; // 修改此处为实际的车位管理系统页面路径
		}
    </script>
</body>

</html>